<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table#tab {
				border-collapse: collapse;
				border: 1px solid red;
				width: 500px;
			}

			table#tab tr,
			table#tab tr th,
			table#tab tr td {
				border: 1px solid red;
			}

			table#tab tr td a {
				font-size: 12px;
				cursor: pointer;
			}

			.edit {
				color: seagreen;
			}

			.delete {
				color: slategray;
			}
		</style>

	</head>
	<body>
		<div id="box">
			<table id="tab" border="" cellspacing="" cellpadding="">
				<thead>
					<tr>
						<th>ID</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
					<!-- <tr>
						<td>1</td>
						<td>小白</td>
						<td>01</td>
						<td>小哥哥</td>
						<td>
							<a class="edit">编辑</a>
							<a class="delete">删除</a>
						</td>
					</tr> -->
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			var arr = [{
					id: 1,
					name: "小白",
					age: 01,
					sex: 0
				},
				{
					id: 2,
					name: "小黑",
					age: 02,
					sex: 1
				},
				{
					id: 3,
					name: "karry",
					age: 18,
					sex: 0
				},
				{
					id: 4,
					name: "tony",
					age: 16,
					sex: 1
				}
			]

			var tbody = document.getElementById("tbody");
			tbody.innerHTML = ""; //清空tbody;
			var trs = "";

			for (var i = 0, len = arr.length; i < len; i++) {
				var tr = "<tr>" +
					"<td>" + arr[i].id + "</td>" +
					"<td>" + arr[i].name + "</td>" +
					"<td>" + arr[i].age + "</td>" +
					"<td>" + (arr[i].sex == "0" ? "小哥哥" : "小姐姐") + "</td>" +
					"<td>" +
					"<a class='edit'>编辑</a> " +
					" <a class='delete'>删除</a>" +
					"</td>" +
					"</tr>"
				trs += tr;
			}
			tbody.innerHTML = trs;
		</script>

	</body>
</html>
